<template>
  <div class="mainor">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom0">
        <!-- 头部 -->
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>支付</span>
          </div>
          <div class="main_crumbs_r boxnr"></div>
        </div>
        <!-- 主体表格 -->
        <div class="main_white" v-loading="listLoading">
          <div class="main_container">
            <div class="logo">
              <img src="@/assets/images/unipay1.png" alt="银联" />
              <!-- <span>银联支付</span> -->
            </div>
            <div class="qrcode_container">
              <div class="qrcode">
                <div class="title">
                  <p>
                    金额：<span>￥{{ order.real_money }}</span>
                  </p>
                  <p>订单：{{ order.order_sn_unionpay }}</p>
                </div>
                <div class="qrcode_img">
                  <div id="qrcode" v-if="qrCodeId ? true : false"></div>
                  <div v-else class="qrcode_box">
                    <img src="@/assets/images/qrcode.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom_info">
              <div class="left">
                <h3>收货信息</h3>
                <p>姓名：{{ order.contact }}</p>
                <p>电话：{{ order.mobile }}</p>
                <p>地址：{{ order.address }}</p>
              </div>
              <div class="right">
                <h3>配送时间及备注</h3>
                <p>配送日期：{{ parseTime(order.send_time, "{y}-{m}-{d}") }}</p>
                <p>配送时间：{{ order.send_time_text }}</p>
                <p>备注：{{ order.remark }}</p>
              </div>
            </div>
            <div class="commit">
              <el-button @click="cancelPay">{{ btntext }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { puzzleImg } from "@/api/currency";
import { bulk_cart_pay, bulk_query } from "@/api/bulk/index";
import { parseTime } from "@/utils/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import QRCode from "qrcodejs2";
export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      parseTime,
      QRCode,
      qrCodeId: "",
      order: {},
      listLoading: false,
      qrcodeTime: "",
      timer: "",
      query_timer: "",
      btntext: "取消支付",
    };
  },
  created() {
    let oid = this.$route.params.oid;
    if (!oid) {
      this.$router.back(-1);
    } else {
      this.bulk_cart_pay(oid);
    }
  },
  mounted() {
    if (this.qrcodeTime) {
      this.timer = setInterval(() => {
        let now = new Date().getTime();
        let diff = now - this.qrcodeTime;
        if (diff > 30 * 60 * 1000) {
          this.$message.error("已超过交易时间，交易关闭");
          setTimeout(() => {
            this.cancelPay();
          }, 1000);
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.query_timer);
  },
  methods: {
    // 购物车列表数据
    bulk_cart_pay(oid) {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { oid: oid }
      );
      bulk_cart_pay(data).then((res) => {
        console.log(res)
        if (res.errcode == 0) {
          this.order = res.data.order;
          if (res.data.res) {
            let data = JSON.parse(res.data.res);
            let qrcodeTime = new Date(data.responseTimestamp).getTime();
            this.qrcodeTime = qrcodeTime;
            let now = new Date().getTime();
            let diff = now - qrcodeTime;
            if (diff > 30 * 60 * 1000) {
              this.$message.error("已超过交易时间，交易关闭");
              setTimeout(() => {
                this.cancelPay();
              }, 1000);
            }
            this.qrCodeId = data.qrCodeId;
            if (data.qrCodeId) {
              this.$nextTick(() => {
                let qrcode = new QRCode("qrcode", {
                  width: 300,
                  height: 300,
                  text: data.billQRCode,
                });
              });
            }
          }
          this.query_timer = setInterval(() => {
            this.bulk_query(res.data.order.id).then((res) => {
              clearInterval(this.query_timer);
            });
          }, 1500);
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
          setTimeout(() => {
            this.$router.back(-1);
          }, 500);
        }
      });
    },
    // 查询
    bulk_query(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      return new Promise((resolve, reject) => {
        bulk_query(data).then((res) => {
          if (res.errcode == 0) {
            let time = 3;
            setInterval((e) => {
              time = time - 1;
              this.btntext = `已支付  ${time}s`;
            }, 1000);
            setTimeout(() => {
              this.cancelPay();
            }, 3000);
            resolve();
          }
        });
      });
    },
    //取消支付
    cancelPay() {
      this.$router.push({
        name: "bulk_order",
        params: {
          type: "pay",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main_container {
  width: 549px;
  margin: 0 auto;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0 17px 0;
    img {
      display: block;
      width: 214px;
    }
    span {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #767676;
      padding-left: 15px;
    }
  }
  .qrcode_container {
    display: flex;
    align-items: center;
    justify-content: center;
    .qrcode {
      height: 400px;
      width: 380px;
      border: 1px solid #cccccc;
      border-radius: 15px;

      .title {
        width: 300px;
        margin: 0 auto;
        padding: 15px 0;
        p {
          font-size: 16px;
          color: #767676;
          line-height: 1.5;
          span {
            color: #1a1a1a;
            font-weight: 700;
          }
        }
      }
      .qrcode_img {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border: 1px dotted #cccccc;
        #qrcode {
          display: block;
          width: 300px;
          height: 300px;
          background-color: #03a98e;
        }
        .qrcode_box {
          width: 100%;
          height: 100%;
          filter: blur(5px);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .bottom_info {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 380px;
    padding: 15px 0;
    h3 {
      color: #1a1a1a;
      font-size: 14px;
      font-weight: 400;
      padding-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #767676;
      line-height: 1.5;
    }
    .left {
      flex: 1.2;
      padding-right: 15px;
    }
    .right {
      flex: 1;
      padding-left: 15px;
    }
  }
  .commit {
    text-align: center;
    padding-bottom: 25px;
    color: #03a98e;
  }
}
</style>